<template>
    <!-- <ul class="news-list">
        <li>编号：{{ query.id }}</li>
        <li>标题：{{ query.title }}</li>
        <li>内容：{{ query.content }}</li>
    </ul> -->
    <div class="detail-container">
        <div class="detail-card">
            <ul class="news-list">
                <li>编号：{{ id }}</li>
                <li>标题：{{ title }}</li>
                <li>内容：{{ content }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts" name="About">
    import { toRefs } from 'vue';
    import { useRoute } from 'vue-router';
    let route = useRoute();
    let {params} = toRefs(route)
    defineProps(['id', 'title', 'content'])
</script>

<style scoped>
.detail-container {
    padding: 20px;
}

.detail-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-list li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}
</style>